<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
				width: 450px;
				padding-left: 80px;
			}
			.box {
				width: 600px;
				margin: 100px auto;
				border: 1px solid #000;
				padding: 20px;
			}
			textarea {
				width: 450px;
				height: 160px;
				outline: none;
				resize: none;
			}
	
			ul li {
				line-height: 25px;
				border-bottom: 1px dashed #ccc;
			}
			input {
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box" id="weibo">
			<span>微博发布</span>
			<textarea rows="10" cols="30" id="txt">
				
			</textarea>
			<button type="button" id="btn">发布</button>
			<ul id="ul"></ul>
		</div>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					if($("#txt").val().trim().length == 0) {
						return;
					}
					//就是文本框的值
					$("<li></li>").text($("#txt").val()).prependTo("#ul");
					$("#txt").val("");
				});
			});
		</script>
	</body>
</html>